<template>
	<view>
		<navbar :config="config" backColor="#000"></navbar>
		<view class="bigView">
			<view class="usable-integrate">
				<view class="usable-title">
					{{ $addDecimals(integral_able , 8) }}
				</view>
				<view class="usable-nums">
					可用积分
				</view>
			</view>
			<view class="box">
				<view class="box-content">
					<view class="usable-hint ">
						<text>转赠积分</text>
						<service-charge title="兑换券转换"></service-charge>
					</view>
					<view class="usable-input zhuanzhenged">
						<image :src="imgUrl+'/integral/money.png'" class="integralMoney"></image>
						<u-input v-model="value" placeholder="请输入转赠额度" @blur="getPointGiveAwayComputer" />
					</view>
					<mobilemapname ref="mobilemapname"></mobilemapname>
					<view class="usable-hint-info">
						<view class="usable-hint-item">
							<text class="usable-hint-title">转为兑换券：</text>
							<text class="usable-hint-val">{{ result.handling_fee }}</text>
						</view>
						<view class="usable-hint-item">
							<text class="usable-hint-title">实际转赠积分：</text>
							<text class="usable-hint-val">{{ result.face_point }}</text>
						</view>
						<!-- 	<view class="usable-hint-item usable-hint-error">
					*积分数量不足，请重新输入
				</view> -->

					</view>
				</view>
				<button class="usable-btn" :disabled="!value" @click.stop="openHintPopup()">
					确认转赠
				</button>
			</view>
			<exchange-hint :params="pointGiveAwayApi" ref="exchangeHint" :type="1" :useNums="value"
				:resultNum="`手机号为“${receiveUser.phone}”的用户`"></exchange-hint>
		</view>
	</view>
</template>

<script>
	import {
		pointGiveAwayComputer,
		pointGiveAway
	} from "@/api/personal-center.js"
	export default {
		data() {
			return {
				imgUrl: this.$mConfig.staticUrl,
				pointGiveAwayApi: {
					url: pointGiveAway,
					mode: 'post',
					data: {
						value: '',
						user_obj_id: ''
					}
				},
				integral_able: 0,
				value: '', // 需要转赠的积分
				receiveUser: {
					phone: '',
					name: '',
					user_obj_id: ''
				},
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '积分转赠',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000",
				},
				// 手续费 / 实际转赠
				result: {
					face_point: 0,
					handling_fee: 0
				}
			};
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			//获取个人信息
			getUserInfo() {
				let personal = uni.getStorageSync('personal');
				this.integral_able = personal ? personal.integral_able : '';
			},
			// 积分转赠计算
			getPointGiveAwayComputer(e) {
				if (!this.value) {
					return false
				}
				this.$http.post(pointGiveAwayComputer, {
					value: this.value
				}).then((res) => {
					if (res && res.code == 200) {
						this.result.face_point = res.data.face_point
						this.result.handling_fee = res.data.handling_fee
					}
				});
			},
			openHintPopup() {
				this.$refs.mobilemapname.getObjUserId().then(res => {
					this.receiveUser = res;
					this.pointGiveAwayApi.data = {
						value: this.value,
						user_obj_id: res.user_obj_id
					}
					this.$refs.exchangeHint.open()
				})
				// this.$refs.exchangeHint.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F9F9F9;
	}

	@import "~./common.scss";

	.bigView {
		width: 712rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		margin: 0 19rpx;
		margin-top: 19rpx;
	}

	.usable-integrate {
		background-color: #fff;
		width: 100%;
		// padding: 11px 33px 22px 33px;
		// min-height: 110px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-weight: 400;
		padding: 0;
		min-height: 0;
		border-top-left-radius: 19rpx;
		border-top-right-radius: 19rpx;
	}

	.usable-nums {
		font-weight: 400 !important;
		font-size: 27rpx !important;
		color: #333333 !important;
		line-height: 32rpx !important;

	}

	.usable-title {
		font-weight: bold !important;
		font-size: 58rpx !important;
		color: #FF211F !important;
		line-height: 68rpx !important;
		margin-top: 57rpx;
		margin-bottom: 8rpx;
	}

	.box-content {
		padding: 0 !important;
		margin: 0 !important;
		margin-top: 57rpx !important;
		margin-left: 38rpx !important;
		margin-right: 38rpx !important;
	}

	.usable-hint {
		margin-bottom: 19rpx;
	}

	.usable-hint text:nth-child(1) {
		font-weight: 600 !important;
		font-size: 31rpx !important;
		color: #333333 !important;
		line-height: 31rpx !important;
	}

	.usable-hint .service-charge {
		font-weight: 400 !important;
		font-size: 31rpx !important;
		color: #333333 !important;
		line-height: 31rpx !important;
	}

	.usable-input {
		width: 635rpx !important;
		height: 96rpx !important;
		background: #F9F9F9 !important;
		border-radius: 19rpx 19rpx 19rpx 19rpx !important;
		border-bottom: 0px solid #fff !important;
	}

	.integralMoney {
		width: 21rpx;
		height: 27rpx;
		margin-left: 19rpx;
		margin-right: 11rpx;
	}

	.usable-hint-info {
		padding-top: 38rpx !important;
	}

	.usable-hint-item {
		font-weight: 400 !important;
		font-size: 25rpx !important;
		color: #333333 !important;
		line-height: 27rpx !important;
		padding-bottom: 19rpx !important;
	}

	.usable-btn {
		text-align: center !important;
		margin: 0 auto !important;
		width: 635rpx !important;
		height: 85rpx !important;
		background: #FF211F !important;
		border-radius: 19rpx !important;
		font-weight: 500 !important;
		font-size: 29rpx !important;
		color: #FFFFFF !important;
		line-height: 34rpx !important;
		display: flex !important;
		flex-direction: row !important;
		justify-content: center !important;
		align-items: center !important;
		margin-top: 77rpx !important;

	}

	.box {
		padding-bottom: 38rpx !important;
	}

	.zhuanzhenged {
		/deep/.uni-input-input {
			font-weight: 600;
			font-size: 35rpx;
			color: #FF211F;
			line-height: 35rpx;
		}
	}

	uni-button[disabled]:not([type]),
	uni-button[disabled][type=default] {
		font-weight: 500 !important;
		font-size: 29rpx !important;
		color: #FFFFFF !important;
		line-height: 34rpx !important;
		background: #E7E7E7 !important;
	}
</style>